<script setup>
import { ref } from 'vue';
import request from '../axios/axios.js'

//导入ref

let inputDormitoryName = ref("");
let inputDormitoryFee=ref("");


//添加寝室信息
async function addDormitory(){


    //调用axios
    let resp=  await request.get("/addDormitoryInfo",{
        params:{
            dormitoryName:inputDormitoryName.value,
            dormitoryFee:inputDormitoryFee.value
        }
    })

    console.log(resp)
    let {data}=resp
    

    
    if(data.statusCode==200){

    //添加成功
        alert(data.message)
    }else{
    //添加失败
        alert(data.message)
    }
} 

</script>

<template>
    管理员宿舍信息管理页面
    增加
    <div class="Dormitory">
        
            <div style="width: 100%; height: 80%;">
                <!-- 寝室信息展示 -->
                <table style="width: 100%; height: 100%;">
                    
                    <tr class="trb">
                        <td class="name">寝室名字</td ><td class="content"  > <input type="text"  v-model="inputDormitoryName" /></td>
                    </tr>

                    <tr class="trb">
                        <td class="name">寝室水电费</td ><td class="content" ><input type="text"  v-model="inputDormitoryFee" /></td>
                    </tr>           
                </table>
            </div>
            <div class="DormitoryName">
               
               增加寝室信息:<button @click="addDormitory()">添加</button>
       </div>
        </div>
</template>

<style scoped>

.name{   
      width: 10%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }
   /*
        用户查询
   */
   .Despoit{
    width: 100%;
    height: 80%;
    background-color: chocolate;
   }


   /* 
    寝室信息展示
   */
   .Dormitory{
    width: 100%;
    height: 20%;

   }
   .showQuery{
    width: 100%;
    height: 100%;

   }
   .DormitoryName{
    width: 100%;
    height: 20%;

   }
</style>
